<!DOCTYPE html>
<html lang="en">
  <?php error_reporting(0); session_start();
	ob_start();?>
  <? include("../common/common.php"); ?>
  
  <script language="javascript">
  	function validate(){
		var messages = '';
		if($("#categoryName").val().length==0){
			messages+=('<li>Category name is required field.</li>');			
		}
		if($("#description").val().length==0){
			messages+=('<li>Description is required field.</li>');			
		}
                if($("#parentCategory").val().length==0){
			messages+=('<li>Parent category is required field.</li>');			
		}
		if(messages.length!=0){
			messages= ("<ul> <b><u>Resolve the following errors to proceed furthur</b></u>"+messages+"</ul>");
			generateError(messages);
			return false;
		}else{
			return true;
		}            
                
	}
	
	function onPopulateEditData(id){
            $.get("newCategoryAction.php?getCategoryInformation=1&categoryId="+id,
                     function(data){
                            var a = (data.split("-"));
                            $("#categoryName").val(a[0]);
                            $("#metaTagDescription").val(a[1]);
                            $("#metaTagKeyWords").val(a[2]);
                            $("#description").val(a[3]);
                            $("#parentCategory").val(a[4]);
                            $("#imageFile").val(a[5]); 
                            
                            $('#myTab a:first').tab('show');
                     }
               , "text"); 
	}
    
        function populateMaintainanceTable(){            
            $.get("newCategoryAction.php?getAllCategories=1",
		  function(data){
                      var response = '';
                      $(data).find('response').each(function(){
                          if($(this).attr("id")!==("ROOT")){
                                $label = $(this).attr("label");
                                $value = $(this).attr("value");
                                if($label==$value)
                                    $value = 'Root Category';
                                response += ('<tr><td>'+$label+'</td><td>'+$value+'</td><td><input type="button" class="btn btn-success" value="Edit"'); 
								response += ('onclick="onPopulateEditData(\''+$(this).attr('id')+'\')"/></td>');
                                response += ('<td><input type="button" class="btn btn-danger" value="Delete"');
                                    response += ('onclick="deleteAction(\''+$(this).attr('id')+'\')"/></td>');
                          }                              
                      });                        
                      $("#tBody").html(response);
		  }
            , "xml"); 
        }
    
        function populateCategory(){           
           $.get("newCategoryAction.php?getAllCategories=1",
		  function(data){
                      var response = '<option value=\"\">-- Select One -- </option>';
                      $(data).find('response').each(function(){
                          response += ('<option value=\"'+$(this).attr("id")+'\">'+$(this).attr("value")+'</option>');
                      });                        
                      $("#parentCategory").html(response);
		  }
            , "xml");            
        }
    
        function initialize(){
             $("#categoryName").val('');
             $("#metaTagDescription").val('');
             $("#metaTagKeyWords").val('');
             $("#description").val('');
             $("#parentCategory").val('');
             $("#imageFile").val('');
        }
        
        function deleteAction(id){            
             $.get("newCategoryAction.php?deleteCategoryInformation=1&categoryId="+id,
                     function(data){
                            populateMaintainanceTable();
                            generateInfo('Category information has been deleted');
                     }
               , "text");             
        }
        
  	function addNew(){
		if(validate()){			
			var x = "categoryName="+ $("#categoryName").val()+"&metaTagDescription="+ $("#metaTagDescription").val()+"&metaTagKeyWords="+ $("#metaTagKeyWords").val()+"&description="+ $("#description").val()+"&parentCategory="+ $("#parentCategory").val()+"&imageFile="+$("#imageFile").val() ;		
			$.post("newCategoryAction.php?addNewCategory=1",x,
		  function(data){		
			generateInfo('New category information has been added successfully');
                        populateCategory();
		  }, "text");
		}
	}
  	
  </script>
	
  <body onload="populateCategory();">	    
    <? include("../common/menu.php"); ?>        
    <div class="container">	  
      <div class="page-header">
    	<h1>Category <small> - You can add / update / delete categories using this page</small></h1>
      </div>	
      <div id = "alert_placeholder"></div>
      <div class="tabbable tabs-left"> <!-- Only required for left/right tabs -->
        <ul class="nav nav-tabs" id="myTab">
            <li class="active"><a href="#tab1" data-toggle="tab" onclick="initialize();">Add Category</a></li> 
            <li><a href="#tab2" data-toggle="tab"  onclick="populateMaintainanceTable();">Maintain Categories</a></li>           	
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="tab1">
            	<form class="form-horizontal">                    
                    <legend>Enter category related informations here</legend>
                    <div class="control-group">
                        <label class="control-label" for="categoryName">Category Name:</label>
                        <div class="controls">
                        	<input type="text" name="categoryName" id="categoryName" placeholder="Category name">
                        </div>
                        <br>
                        <label class="control-label" for="metaTagDescription">Meta Tag Description:</label>
                        <div class="controls">
                        	<textarea rows="3" name="metaTagDescription" id="metaTagDescription" placeholder="Meta Tag Description"></textarea>
                        </div>
                        <br>
                        <label class="control-label" for="metaTagKeyWords">Meta Tag Keywords:</label>
                        <div class="controls">
                        	<textarea rows="3" name="metaTagKeyWords" id="metaTagKeyWords" placeholder="Meta Tag Keywords"></textarea>
                        </div>
                        <br>
                        <label class="control-label" for="description">Description:</label>
                        <div class="controls">
                        	<textarea rows="5" style="width:500px" name="description" id="description" placeholder="Description"></textarea>
                        </div>
                        <br>
                        <label class="control-label" for="parentCategory">Parent Category:</label>
                        <div class="controls">
                        	<select id="parentCategory" name="parentCategory">                            	
                            </select>
                        </div>
                        <br>
                        <label class="control-label" for="imageFile">Image:</label>
                        <div class="controls">
                        	<input type="file" id="imageFile" name="imageFile"/>
                        </div>
                        <br>
                        <div class="controls">
                        	<button type="button" class="btn btn-large btn-primary"  onClick="addNew()">Save</button> &nbsp;
                        	<button type="reset" class="btn btn-large btn-primary">Reset</button>
                        </div>
                     </div>
               </form>
        	</div> 
            <div class="tab-pane" id="tab2">
            	<legend>Category maintainance page</legend>
                <table class="table table-striped">
                	<thead>
                    	<th>Category Name</th>
                        <th>Parent Category</th>
                        <th>Edit</th>
                        <th>Delete</th>
                    </thead>
                    <tbody id="tBody">                    	
                    </tbody> 
                </table>
            </div>           
       </div>           
     </div>
  </body>
</html>
